function $key(getkeys) {
    return document.querySelector(getkeys);
}
// 提取日期相关函数
date();
function date() {
    var spa = document.querySelector(".dater");
    var timer = null;
    // 封装时间日期格式化
    function mydate() {
        var date = new Date();
        // 时间日期格式化 yyyy-mm-dd hh:mm:ss
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var data = date.getDate();
        var hours = date.getHours();
        var minutes = date.getMinutes();
        var seconds = date.getSeconds();
        // 补 0
        month = (month < 10) ? "0" + month : month;
        data = (data < 10) ? "0" + data : data;
        hours = (hours < 10) ? "0" + hours : hours;
        minutes = (minutes < 10) ? "0" + minutes : minutes;
        seconds = (seconds < 10) ? "0" + seconds : seconds;
        var res = `${year}年${month}月${data}日 ${hours}:${minutes}:${seconds}`;
        return res;
    }

    function automove() {
        spa.innerHTML = mydate();
    }
    // 自动走
    setInterval(automove, 1000);
}
//添加内容
var diarrtop = document.getElementsByClassName("diarr-top")[0];
diarrtop.innerHTML = `
        <div class="nav_right_top_usermgleft">
          <div class="nav_right_top_usermge">
            <span class="spa"></span>
            <span class="spa1">用户管理</span>
          </div>
          <input type="text" placeholder="请输入姓名" class="inpn" />
          <button class="seek">搜索</button>
        </div>
        <div class="nav_right_top_usermgright">
          <img src="./image/删除.png" class="img2" />
          <img src="./image/添加.png" class="img1" />
        </div>
`
var diarrbott = document.getElementsByClassName("diarr-bottom")[0];
diarrbott.innerHTML = `
    <table>
          <thead>
            <tr>
              <th>选择</th>
              <th>姓名</th>
              <th>部门</th>
              <th>性别</th>
              <th>电话</th>
              <th>职能</th>
              <th>操作</th>
            </tr>
          </thead>
          <tbody></tbody>
            <tfoot>
                <tr>
                  <td colspan="6">
                     <button id="last">&lt;</button>
                     <div class="num"></div>
                     <button id="next">&gt;</button>
                </td>
                </tr>
              </tfoot>
        </table>
`;

//分页

//封装添加用户模态框
var mytbody = document.getElementsByTagName("tbody");
var addImg = document.querySelector('.img1');
addImg.onclick = function () {
    myModel({
        mask: true,//显示蒙版
        title: "添加用户",//标题
        content_item1: `
                    <div class="userupdate">
                        <div class="left">
                            <div class="name">姓名: <input type="text" id="username"></div>
                        <div class="accound name">账号: <input type="text" id="useraccount"></div>
                        <div class="password name">密码: <input type="text" id="pwd"></div>
                        <div class="usersex name">性别：<select name="" id="sex">
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select></div>
                        </div>
                        <div class="right">
                            <div class="depid name">部门: <select name="" id="dept">
                                <option value="0">UI设计</option>
                                <option value="1">前端开发</option>
                                <option value="2">后端开发</option>
                            </select></div>
                        <div class="userphone name">电话: <input type="text" id="phone"></div>
                        <div class="role name">职能: <select name="" id="userRole">
                            <option value="2">老师</option>
                            <option value="3">学生</option>
                        </select></div>
                        </div>
                    </div>
                `,
        fun: function () {
            // 执行添加的函数
            addUser()
        }
    })
}
//搜索框
var inpn = document.getElementsByClassName("inpn")[0];
var seek = document.getElementsByClassName("seek")[0];
seek.onclick = function () {
    $key("tbody").innerHTML = "";
    userList()

}
pageIndex = 1;
pageSize = 7;
pageCount = 0;
//封装用户渲染
function userList() {


    $key(".num").innerHTML = "";
    var data = {
        userName: inpn.value,
        pageSize: pageSize,
        pageIndex: pageIndex
    }

    ajax.post(baseUrl.myUrl + "user/userList", data, function (res) {
        console.log(res);
        if (res.code == 200) {
            $key("tbody").innerHTML = "";

            var datalist = res.dataset;
            pageCount = datalist.pageCount;
            for (var i = 0; i < datalist.userList.length; i++) {
                // var mytbody = document.getElementsByTagName("tbody");
                var newTr = document.createElement("tr");
                newTr.innerHTML = `
                    <td><input type="checkbox"></td>
                    <td>${res.dataset.userList[i].userName}</td>
                    <td>${res.dataset.userList[i].deptId}</td>
                    <td>${res.dataset.userList[i].userSex}</td>
                    <td>${res.dataset.userList[i].userPhone}</td>
                    <td>${res.dataset.userList[i].userRole}</td>
                    <td>
                        <button class="del" onclick = "delUser(${datalist.userList[i].userId})">删除</button>  
                        <button class="modify"  onclick = "modifyUser(${datalist.userList[i].userId})">修改</button> 
                    </td>
                    `;
                $key("tbody").appendChild(newTr);
            }
            for (var i = 0; i < pageCount; i++) {
                var btn = document.createElement("button");
                btn.className = "btn"
                btn.innerHTML = i + 1
                $key(".num").appendChild(btn);
            }
            age();
        }
    })
    // pagination()
}
userList();
function age() {
    $(".btn").on("click", function () {
        pageIndex = $(this).index() + 1;
        userList();
        $(this).css("background", "blue")
        $(this).siblings().css("background", "");
    })
    var next = document.getElementById("next");
    var last = document.getElementById("last");

    last.onclick = function () {
        pageIndex--;
        if (pageIndex <= 1) {
            pageIndex = 1;
        }
        userList();
    }
    next.onclick = function () {
        pageIndex++;
        if (pageIndex >= pageCount) {
            pageIndex = pageCount;
        }
        userList();
    }
}
//封装添加
function addUser() {
    var data = {
        userName: document.getElementById("username").value,
        userAccount: document.getElementById("useraccount").value,
        userPassword: document.getElementById("pwd").value,
        userSex: Number(document.getElementById("sex").value),
        deptId: Number(document.getElementById("dept").value),
        userPhone: document.getElementById("phone").value,
        userRole: Number(document.getElementById("userRole").value),
    }
    ajax.post(baseUrl.myUrl + "user/insertUser", data, function (res) {
        if (res.code == 200) {
            alert("添加成功")
            userList();
        }
    })
}

//封装删除
function delUser(userId) {
    ajax.post(baseUrl.myUrl + `user/deleteUser/${userId}`, {}, function (res) {
        if (res.code == 200) {
            alert("删除成功");
            userList();
        }
    })
}
//封装修改
function modifyUser(userId) {
    myModel({
        mask: true,//显示蒙版
        title: "修改用户",//标题
        content_item1: `
                    <div class="userupdate">
                        <div class="left">
                            <div class="name">姓名: <input type="text" id="username"></div>
                        <div class="password name">密码: <input type="text" id="pwd"></div>
                        <div class="usersex name">性别：<select name="" id="sex">
                                <option value="0">男</option>
                                <option value="1">女</option>
                            </select></div>
                        </div>
                        <div class="right">
                            <div class="depid name">部门: <select name="" id="dept">
                                <option value="1">后端开发</option>
                                <option value="2">前端开发</option>
                                <option value="3">UI设计</option>
                            </select></div>
                        <div class="userphone name">电话: <input type="text" id="phone"></div>
                        <div class="role name">职能: <select name="" id="userRole">
                            <option value="2">老师</option>
                            <option value="3">学生</option>
                        </select></div>
                        </div>
                    </div>
                `,
        fun: function () {
            var data = {
                userId: userId,
                userName: document.getElementById("username").value,
                // userAccount:document.getElementById("username").value,
                userPassword: document.getElementById("pwd").value,
                userSex: Number(document.getElementById("sex").value),
                deptId: Number(document.getElementById("dept").value),
                userPhone: document.getElementById("phone").value,
                userRole: Number(document.getElementById("userRole").value),
            }
            ajax.post(baseUrl.myUrl + 'user/updateUser', data, function (res) {
                if (res.code == 200) {
                    alert('当前用户修改成功');
                    userList();
                }
            }
            )
        }
    })
}


//页面跳转
//日志系统
var journal = document.getElementsByClassName("journal")[0];
journal.onclick = function () {
    location.href = "./diary.html";
}
//审核系统
var vet = document.getElementsByClassName("vet")[0];
vet.onclick = function () {
    location.href = "./audit.html";
}
//用户管理
var user = document.getElementsByClassName("user")[0];
user.addEventListener('click', function () {
    location.href = "./UserMage.html";
});
//班级管理
var classs = document.getElementsByClassName("classs");
classs[0].onclick = function () {
    location.href = "./ClassManagement.html";
}
//日常
var routine = document.getElementsByClassName("routine")[0];
routine.onclick = function () {
    location.href = "./daily.html";
}
//学生档案
var archives = document.getElementsByClassName("archives")[0];
archives.onclick = function () {
    location.href = "./student file.html";
}
//项目管理
var project = document.getElementsByClassName("project")[0];
project.onclick = function () {
    location.href = "./projectmanagement.html";
}
//出差记录
var travel = document.querySelector(".travel");
travel.addEventListener('click', function () {
    location.href = "./business.html";
});
//请假记录
var excused = document.querySelector(".excused");
excused.addEventListener('click', function () {
    location.href = "./vacate.html";
});
//考勤记录
var presence = document.querySelector(".presence");
presence.addEventListener('click', function () {
    location.href = "./clock.html";
});

